OACを利用したCloudFront + S3の静的ウェブサイトをTerraformで作成してみた 〜CodePipelineを添えて〜
こんにちは！AWS事業本部コンサルティング部のたかくに（@takakuni_）です。
今回は、Terraformを利用してOAC対応のCloudFront + S3構成を作成してみようと思います。
また、S3へのデプロイはCodePipelineを利用した構成にしてみようと思います。
構成図
今回の構成は次のイメージです。要点は次のとおりです。
- EventBridge：CodeCommitレポジトリの変更をトリガーにCodePipelineをスタート。
- CodePipeline：CodeCommitをソースとして、S3へアーティファクトを解凍してデプロイ。
- KMS：S3のサーバーサイド暗号化に使用。コストの削減のためバケットキーを利用。
- CloudFront：デフォルトルートオブジェクトに静的ウェブサイトを利用。OAC経由でS3へアクセス。
- S3（アーティファクト）：CodeCommitのソースアーティファクトを格納。ACL無効化。暗号化にはSSE:KMS。ライフサイクルルールを付けても尚よし。
- S3（静的ウェブサイト）：静的ウェブサイトで利用。ACL無効化。暗号化にはSSE：KMS。CodeCommitでバージョン管理しているためバージョニングは今回は無効。
やってみた
では実際にデプロイしてみようと思います。
今回利用するコードは、以下に格納されています。適宜カスタマイズしてお使いいただけると嬉しいです。
初回デプロイ時は、CodeCommitにソースコードをプッシュしていないため、パイプラインが失敗します。
ソースコードの追加
それではCodeCommitレポジトリへコードの追加を行います。今回は非常に簡単なHTMLファイルをCodeCommitレポジトリにプッシュします。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Static Web Hosting Pipeline</title>
</head>
<body>
CodePipeline Deployment v1.
</body>
</html>
私はマネジメントコンソール上で行いましたが、適宜使いやすいツールでコードのプッシュいただければと思います。
CodePipelineの確認
CodeCommitへのプッシュをトリガーにEventBridgeルールがトリガーされる仕組みになっています。
デプロイが完了すると次のような画面になっているかと思います。
Webサイトの確認
CloudFrontで提供されているドメイン名から確認してみます。
デプロイが問題なく成功していると、CodeCommitにプッシュされたindex.htmlが表示されていると思います。
参考
まとめ
以上、「OACを利用したCloudFront + S3の静的ウェブサイトをTerraformで作成してみた 〜CodePipelineを添えて〜」でした！
これから、OACをガンガン使えるようテンプレート化してみました！この記事がどなたかの参考になれば幸いです。
AWS事業本部コンサルティング部のたかくに（@takakuni_）でした！
![[アップデート] Application Load Balancer コンソールから CloudFront + WAF を統合出来るようになりました](https://images.ctfassets.net/ct0aopd36mqt/wp-thumbnail-f650a3011b384cc3781610c17755bc71/c37c67c9bc40b72e6dce1a49f4153283/elastic-load-balancing)
